<template>
	<view class="content">
		<scroll-view scroll-y="true" class="main" @scrolltolower="more">
			<view v-if="boxtype==3" class=" flex"
				style="flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;padding: 0 24rpx; ">
				<template v-for="(item) in list">
					<newskillbox name="newskillbox" :select="true" :item="item" :ids="ids" @choose="choose">
					</newskillbox>
				</template>
			</view>
			<template v-for="(item) in list" v-else>
				<skill-box :type='boxtype' :item="item" :select="true" :ids="ids" @choose="choose"></skill-box>
			</template>
			
			<view class="flex-cneter ensureBox" v-if="list.length > 0">
				<image :src="$oss(ensure_image)" class="ensure_image" mode="widthFix"></image>
			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;"
				icon="/static/none.png">
			</u-empty>
		</scroll-view>
		<view class="reservationBox">
			<view class="btn" @click="toReservation">立即预约</view>
		</view>
	</view>
</template>

<script>
	import skillBox from '@/components/skillBox/skillBox.vue'
	import newskillbox from '@/components/newskillbox/newskillbox.vue'
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			skillBox,
			newskillbox
		},
		data() {
			return {
				current: null,
				location: '',
				name: '',
				is_free: '',
				gender: '',
				page: 1,
				finish: false,
				list: [],
				cate_id: '',
				ids: '',
				boxtype: '',
				ensure_image: uni.getStorageSync('project').ensure_image
			};
		},
		onLoad(option) {
			this.cate_id = option.id
			this.getInfo()
			this.boxtype = uni.getStorageSync('project').skillstyle
		},
		methods: {
			choose(id) {
				this.ids = id
			},
			...mapActions(['getLocation']),
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				this.reload()
			},
			reload() {
				this.page = 1
				this.list = []
				this.finish = false
				this.getList()
			},
			more() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/getskill', {
					...this.location,
					cate_id: this.cate_id,
					page: this.page,
					name: this.name,
					gender: this.gender,
					is_free: this.is_free,
				}).then(res => {

					if (res.code == 1) {
						this.list = this.list.concat(res.data.list)
						if (res.data.list.length === 0) {
							this.finish = true
						}
						console.log(this.list)
					}
				}).catch((res) => {

				})
			},
			toReservation() {
				if (this.ids === '') return this.$toast('请选择技师')
				uni.navigateTo({
					url: '/pages/reservation/reservation?cate_id=' + this.cate_id + '&id=' + this.ids
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7FA;

	}

	.content {
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.ensureBox {
			margin: 30rpx;
		}

		.main {
			overflow: hidden;
			flex: 1;
		}
	}

	.reservationBox {
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;


		.btn {
			width: 686rpx;
			height: 96rpx;
			background: #00CE9B;
			border-radius: 48rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 20rpx auto 0;
		}
	}
</style>
